// 函数组件
const Lists = ({ filterList }) => {
  // const { filterList } = props; // 可以直接在函数参数中进行解构
  return (
    <ul className="ul-contaienr">
      {
        filterList.map((item, index) => {
          return (
            <div key={item.url}>
              <li>{ item.name }</li>
              <img 
                src={ `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${ item.id }.png` }
              />
            </div>
          )
        })
      }
    </ul>
  )
};

// 类组件
// class Lists extends React.Component {
//   render() {
//     const { filterList } = this.props;
//     return (
//       <ul className="ul-contaienr">
//         {
//           filterList.map((item, index) => {
//             return (
//               <div key={item.url}>
//                 <li>{ item.name }</li>
//                 <img 
//                   src={ `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${ item.id }.png` }
//                 />
//               </div>
//             )
//           })
//         }
//       </ul>
//     )
//   }
// }